<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test1"></div>

	<!-- 引入react核心库，引入后全局多了一个React对象 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom，引入后全局多了一个ReactDOM对象 -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制，引入后全局多了一个PropTypes对象 -->
  <script src="../lib/prop-types.js"></script>

	<script type="text/babel">

    /*
    新生命周期：
    即将废弃三个Will钩子：
        componentWillMount
        componentWillReceiveProps
        componentWillUpdate
    如果要使用，需要添加UNSAFE_前缀：
        UNSAFE_componentWillMount
        UNSAFE_componentWillReceiveProps
        UNSAFE_componentWillUpdate
    添加了两个钩子：----不过这两个生命周期使用的频率很低
        getDerivedStateFromProps
        getSnapshotBeforeUpdate 
    */



    class Count extends React.Component{
      constructor(props) {
        console.log('Count --- constructor');
        super(props);
      }

      state = {
        count: 0
      }

      add = () => {
        this.setState({
          count: this.state.count+1
        })
      }
      xiezai = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test1'));
      }
      // 强制更新
      force = () => {
        this.forceUpdate();
      }

      // 获取DerivedStateFromProps的返回值，返回值会更新到state中
      // 获得一个派生的props对象
      // 此方法使用于罕见的用例，即 state 值在任何时候都取决于 props。
      static getDerivedStateFromProps(props, state) {
        console.log('Count --- getDerivedStateFromProps');
        return null;
      }
      static getDerivedStateFromProps(props, state) {
        console.log('Count --- getDerivedStateFromProps');
        // return {count:props.count}; // 用于更新状态
        return null; // 不更新状态
      }

      getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('Count --- getSnapshotBeforeUpdate');
        return null;
      }

      // 组件挂在完毕的钩子
      componentDidMount() {
        console.log('Count --- componentDidMount');
      }

      // 组件将要卸载的钩子
      componentWillUnmount() {
        console.log('Count --- componentWillUnmount');
      }

      // 控制组件更新的阀门，如果不写，默认返回true
      shouldComponentUpdate(nextProps, nextState) {
        console.log('Count --- shouldComponentUpdate');
        // return false; // 阀门关闭，组件不更新
        return true; // 阀门打开，组件更新
      }

      // 在更新之前获取快照
      getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('Count --- getSnapshotBeforeUpdate');
        return null;
      }

      // 组件更新完毕的钩子
      // snapshot参数是getSnapshotBeforeUpdate的返回值
      componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('Count --- componentDidUpdate');
        console.log(prevProps, prevState, snapshot);
      }

      // 初始化渲染、状态更新之后
      render() {
        console.log('Count --- render');
        return (
          <div>
            <h2>求和：{this.state.count}</h2> 
            <button onClick={this.add}>点我+1</button>
            <br/>
            <button onClick={this.xiezai}>卸载组件</button>
            <br/>
            <button onClick={this.force}>强制更新</button>
          </div>
        )
      }
    }

		// 2.渲染虚拟DOM到页面
		ReactDOM.render(<Count/>, document.getElementById('test1'));
	</script>
</body>
</html>